<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 如果想让页面在移动端展示，需要加上元标签指定视口   metavp -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>媒体查询基本语法</title>
		<style>
			/* 默认按钮隐藏 */
			.btn{
				display: none;
				
			}
			
			
			  /* 用媒体查询实现   screen=电脑显示器  */
			@media all   and (max-width:600px) {   /* min-width=宽度的最小范围  max-width=宽度的最大范围*/
				/* 在这里去写具体的css代码   这里的代码只有在满足上面的条件时才会启用 */
				/* 让按钮在屏幕分辨率低于600px的显示 */
				.btn{  /* 显示按钮 */
					display: block;
				}
				/* 隐藏菜单 */
				.mume{
					display: none;
				}
				
				/* 当鼠标悬停的时候，显示菜单，并改变背景色 */
				.nav:hover .mume{
					display: block;
					background-color: red;
				}
			}
			

			
		</style>
	</head>
	<body>
		<div class="nav">
			<button class="btn">三</button>
			<div class="mume">
				<div>0001</div>
				<div>0002</div>
				<div>0003</div>
				<div>0004</div>
				<div>0005</div>
			</div>			
		</div>
	</body>
</html>